<template>
	<div class="quick-top-box">
		<!-- 左侧 -->
		<div class="quick-top-box-left">
			<div>
				<!-- title -->
				<p>
					C2C 快捷交易
				</p>
				<p class="mt-10px">
					使用 {{ useCoin }} 购买 {{ coin }}
				</p>
				<p class="mt-40px">
					快捷交易为您自动匹配当前 C2C 市场购买 {{ coin }} 的最优价格之选
				</p>
			</div>
		</div>
		<!-- 右侧 -->
		<div class="quick-top-box-right">
			<div>
				<el-tabs type="border-card" v-model="tabValue" @tab-change="changeTab">
					<el-tab-pane label="我要买" name="pay">
						<PayCard @pay-click="placeOrder"
						@changeCoin="changeCoin"
						ref="payCardRef"></PayCard>
					</el-tab-pane>
					<el-tab-pane label="我要卖" name="sell">
						<SellCard @sell-click="placeOrder"
						@changeCoin="changeCoin"
						ref="sellCardRef"></SellCard>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import PayCard from './PayCard.vue';
import SellCard from './SellCard.vue';
interface IProps {
	useCoin: string;
	coin: string;
}

const props = defineProps<IProps>()
const tabValue = ref<'pay'|'sell'>('pay')
const payCardRef = ref<any>(null);
const sellCardRef = ref<any>(null);
const emit = defineEmits(['change','placeOrder','changeCoin'])

function placeOrder(val:string) {
	emit('placeOrder',val)
}

function changeTab() {
	if(tabValue.value === 'pay'){
		emit('change', tabValue.value,payCardRef.value.sellCoinSelected.coin,payCardRef.value.getCoinSelected.coin)
	}
	if(tabValue.value === 'sell'){
		emit('change', tabValue.value,
		sellCardRef.value.sellCoinSelected.coin,
		sellCardRef.value.getCoinSelected.coin)
	}
}

function changeCoin(coin:any,getCoin:any) {
	emit('changeCoin',coin.coin,getCoin.coin)
}

defineExpose({
	tabValue
})

</script>
<style lang="scss" scoped>
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child,
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child {
	padding: 26px 120px;
	color: #C9CDD4;
}

::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
	color: #000000;
}

::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child.is-active {
	border-radius: 10px 0 0 0;
}

::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child.is-active {
	border-radius: 0 10px 0 0;
}

::v-deep .el-tabs__nav-wrap,
::v-deep .el-tabs__nav-scroll,
::v-deep .el-tabs__nav {
	background-color: rgba(0, 0, 139, 0);
}

::v-deep .el-tabs--border-card {
	border-radius: 10px;
}

::v-deep .el-tabs--border-card>.el-tabs__header {
	border-radius: 10px 10px 0 0;
}


.quick-top-box {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.quick-top-box-left {
		>div {
			>p:nth-child(1),
			>p:nth-child(2) {
				font-size: 48px;
				font-weight: bold;
				color: #000000;
			}
			>p:nth-child(3) {
				font-size: 18px;
				color: #000;
			}
		}
	}

	.quick-top-box-right {
		>div {
			border-radius: 10px;
			box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.05);
		}
	}
}
</style>
